import React from 'react';
import { Input, Affix } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import style from './input.module.css'
import { post } from './../../utils/post';
import { throttle } from '../../utils/throttle';
const MyInput = (props) => {
    // 节流函数 一秒发一次
    // const delay = 1000
    const inputChangeFunc = (e) => {
        console.log(e.target.value, '发了一次请求');
        post('/api/todo', { title: 'one' }).then(res => {
            console.log(res);
        })

    }

    const radius = () => {
        return props.isRadius ? `${style.radius}` : null
    }
    return (
        <Affix offsetTop={props.size} >
            <div className={`${style.body}`}>
                <Input placeholder="search some twitter "
                    className={`${radius()}`}
                    onChange={throttle(inputChangeFunc, props.delay)}
                    prefix={<SearchOutlined />} />
            </div>
        </Affix>
    )
}

export default MyInput